<template>
  <div>
      <!-- 渲染虚拟dom的节点 -->
      <div id="container">
        {{ countTimeText }}
      </div>
      <XtxDialog title="自定义标题" :visible="visible" @close="closeDialog">
        <template #default> 自定义内容 </template>
        <template #footer>
          <XtxButton type="gray" style="margin-right:20px">取消</XtxButton>
          <XtxButton type="primary">确认</XtxButton>
        </template>
      </XtxDialog>
      <XtxDialog title="切换收货地址">
        <template #default>
          对话框内容
        </template>
        <template #footer>
          <XtxButton type="gray" style="margin-right:20px">取消</XtxButton>
          <XtxButton type="primary">确认</XtxButton>
        </template>
      </XtxDialog>
  </div>
</template>

<script>

import { useCountDown } from '@/compositions'

// createVNode  创建虚拟dom
// 参数1：String -> div/span/h1 | Object -> 由组件实例对象产出的对象 | Function
// 参数2：{}  props属性   当参数1是普通标签节点时，可以配置dom属性 class id
//              当参数1是一个组件节点时  可以配置 props
// 参数3：[]  配置子节点

import { createVNode, render, onMounted, ref } from 'vue'

import Test from './test'

// 导入message方法
// import { message } from '@/components/Message/index'
// message({ type: 'success', text: '通过方法执行的弹框', time: 3000 })

// 创建一个h1标签产出的虚拟dom
const h1VNode = createVNode('h1', { id: 'h1' }, ['我是h1标签'])
// console.log(h1VNode)
// 创建一个由组件对象产出的虚拟dom
const cVNode = createVNode(Test, { title: '组件prop标题' }, [])
// console.log(cVNode)

const dpNode = createVNode('div', {}, [createVNode('p', {}, ['我是子节点'])])

export default {
  setup () {
    onMounted(() => {
      const con = document.getElementById('container')
      // const sec = document.querySelector('.sec')
      // 渲染一个真实的h1标签
      render(h1VNode, document.getElementById('container'))
      // 渲染一个真实的组件
      render(cVNode, document.getElementById('container'))
      // render(pVNode, sec)
      render(dpNode, con)
    })

    // 倒计时方法
    const { countTimeText, start } = useCountDown()
    start(1000)

    const visible = ref(true)
    function closeDialog (vis) {
      visible.value = vis
    }
    return { countTimeText, closeDialog, visible }
  }
}
</script>

<style>
  body {
    padding: 20px;
  }
  .color {
      color: blue;
      background: #fff;
    }
</style>
